<template>
	<view>
		<tui-list-cell @click="listClick(k)" :arrow="true" class="tui-list" v-for="(v,k) in list" :key="k">
			<image v-if="v.typeImg" style="width: 50upx; height: 50upx;" :src="'../../../static/img/pay-type/'+v.typeImg+'.png'"></image>
			<image v-else style="width: 50upx; height: 50upx;" src="../../../static/img/pay-type/0.png"></image>
			<text class="tui-list-cell-name">{{v.typeName}}</text>
		</tui-list-cell>
		<tui-button @click="add" style="padding-top: 42upx;" type="blue" :shadow="true" shape="circle"  width="500rpx">新建</tui-button>
		
		<chunLei-modal v-model="input.value" :mData="input.data" :type="input.type" @onConfirm="onConfirm" @onCancel="onCancel" navMask>
		</chunLei-modal>
	</view>
</template>

<script>
	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiIcon from "@/components/icon/icon"
	import tuiButton from "@/components/extend/button/button"
	import tuiTag from "@/components/tag/tag"
	import chunLeiModal from '@/js_sdk/chunLei-modal/chunLei-modal.vue'
	import common from "../../../common/common.js"
	import url from "../../../common/url.js"
	
	let self=null;
	export default {
		components:{
			tuiListView,
			tuiListCell,
			tuiIcon,
			tuiButton,
			tuiTag,
			chunLeiModal
		},
		data() {
			return {
				list:[
					{
						typeName:'请求中',
						typeImg:'canying'
					}
				],
				inputData:{
					title:'请输入新的支付类型',
					content:[
						{title:'支付类型',content:'',type:'text',placeholder:'请输入支付类型'},
					]
				},
				//弹出框的数据
				input:{
					value:false,
					type:'default',
					data:{},
					inputData:{
						title:'请输入新的支付类型',
						content:[
							{title:'支付类型',content:'',type:'text',placeholder:'请输入支付类型'},
						]
					},
				}
			}
		},
		onLoad() {
			self=this;
			
			common.http({
				url:url.userGetUserPayType,
				data:{key:common.userInfo.key},
				ok(data){
					self.list=data
					uni.hideLoading()
				}
			})
		},
		methods:{
			//添加
			add(){
				this.input.value=true
				this.input.type='input'
				this.input.data=this.inputData
			},
			listClick(index){
				uni.showActionSheet({
				    itemList: ['置顶', '删除'],
				    success: function (res) {
				        if(res.tapIndex==0){
							//置顶
							const key=common.userInfo.key
							common.http({
								url:url.userPayTypeTop,
								data:{key:key,index:index},
								ok(data){
									self.list=data
									uni.hideLoading()
									uni.showToast({
									    title: '置顶成功',
									    duration: 2000
									});
								}
							})
						}else{
							const key=common.userInfo.key
							common.http({
								url:url.userPayTypeDelete,
								data:{key:key,index:index},
								ok(data){
									self.list=data
									uni.hideLoading()
									uni.showToast({
									    title: '删除成功',
									    duration: 2000
									});
								}
							})
						}
				    }
				});
			},
			//弹框确认
			onConfirm(e){
				const data=e[0].content
				if(data.length<=0){
					this.value=false
					this.type='default'
					this.data={}
					uni.showModal({
					    title: '提示',
					    content: '输入为空！',
						showCancel:false,
					    success: function (res) {
					        self.value=true
					        self.type='input'
					        self.data=self.inputData
					    }
					});
				}else if(data.length>4){
					this.value=false
					this.type='default'
					this.data={}
					uni.showModal({
					    title: '提示',
					    content: '支出类型名请勿大于4个汉字！',
						showCancel:false,
					    success: function (res) {
					        self.value=true
					        self.type='input'
					        self.data=self.inputData
					    }
					});
				}else{
					common.http({
						url:url.userPayTypeAdd,
						data:{name:data,key:common.userInfo.key},
						ok(data){
							self.list=data
							uni.hideLoading()
							uni.showToast({
							    title: '添加成功',
							    duration: 2000
							});
						}
					})
				}
			},
			//弹框取消
			onCancel(){
				this.value=false
				this.type='default'
				this.data={}
			},
		}
	}
</script>

<style>
.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-list-view {
		padding-top: 40upx !important
	}

	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}

	.tui-list::after {
		left: 94upx !important
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}

	.logo {
		height: 40upx;
		width: 40upx;
	}

	.tui-flex {
		display: flex;
		align-items: center;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		display: block;
		margin-right: 24upx;
	}

	.tui-msg-item {
		max-width: 500upx;
		min-height: 80upx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34upx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26upx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 120upx;
		height: 88upx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76upx;
		padding-bottom: 10upx;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24upx;
		line-height: 24upx;
		color: #9397a4;
	}

	.tui-badge {
		width: auto
	}

	.tui-msg::after {
		left: 154upx !important
	}
</style>
